<script>
export default {
  name: "About",
  data(){
    return {
      value:'',
    }
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    Select(key, keyPath) {
  this.value=key
}
  }
}
</script>

<template>
  <div class="About">
    <div>
      <el-row>
        <el-col :span="12">
          <el-menu router="router" @select="Select" style="width: 30vh;height: 100vh;" :default-active="value" class="el-menu-vertical-demo"
            @open="handleOpen" @close="handleClose" background-color="#545c64" text-color="#fff"
            active-text-color="#ffd04b">
            <el-menu-item default-active="1" index="/about"><i class="el-icon-document"></i>登录</el-menu-item>
            <el-menu-item default-active="3" index="2"><i class="el-icon-s-home"></i>系统首页</el-menu-item>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-goods"></i>
                <span>商品管理</span>
              </template>
              <el-menu-item index="3-1">商品列表</el-menu-item>
              <el-menu-item index="3-2">商品组</el-menu-item>
              <el-menu-item index="3-3">分配管理</el-menu-item>
              <el-menu-item index="3-4">品牌管理</el-menu-item>
              <el-menu-item index="3-5">设置</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <i class="el-icon-tickets"></i>
                <span>订单管理</span>
              </template>
              <el-menu-item index="4-1">订单概述</el-menu-item>
              <el-menu-item index="4-2">订单状态</el-menu-item>
              <el-menu-item index="4-3">维权管理</el-menu-item>
              <el-menu-item index="4-4">工具</el-menu-item>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <i class="el-icon-s-finance"></i>
                <span>财务管理</span>
              </template>
              <el-menu-item index="5-1">积分明细</el-menu-item>
              <el-menu-item index="5-2">余额明细</el-menu-item>
              <el-menu-item index="5-3">对账单管理</el-menu-item>
              <el-menu-item index="5-4">充值记录</el-menu-item>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <i class="el-icon-wallet"></i>
                <span>优惠管理</span>
              </template>
              <el-menu-item index="6-1">基本功能</el-menu-item>
              <el-menu-item index="6-2">优惠券管理</el-menu-item>
            </el-submenu>
            <el-submenu index="7">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>会员管理</span>
              </template>
              <el-menu-item  index="7-1">会员列表</el-menu-item>
              <el-menu-item  index="7-2">会员概述</el-menu-item>
              <el-menu-item  index="7-3">会员等级</el-menu-item>
              <el-menu-item  index="7-4">分组设置</el-menu-item>
            </el-submenu>
            <el-submenu index="8">
              <template slot="title">
                <i class="el-icon-s-shop"></i>
                <span>活动管理</span>
              </template>
              <el-menu-item index="8-1">秒杀管理</el-menu-item>
              <el-menu-item index="8-2">拼团管理</el-menu-item>
            </el-submenu>
            <el-submenu index="9">
              <template slot="title">
                <i class="el-icon-chat-dot-round"></i>
                <span>积分商城</span>
              </template>
              <el-menu-item  index="9-1">商品列表</el-menu-item>
              <el-menu-item index="9-2">轮播图管理</el-menu-item>
              <el-menu-item index="9-3">分类管理</el-menu-item>
              <el-menu-item index="9-4">状态管理</el-menu-item>
            </el-submenu>
            <el-submenu index="10">
              <template slot="title">
                <i class="el-icon-lock"></i>
                <span>权限管理</span>
              </template>
              <el-menu-item index="10-1">门店管理</el-menu-item>
              <el-menu-item index="10-2">管理员管理</el-menu-item>
              <el-menu-item index="10-3">提现审核</el-menu-item>
              <el-menu-item index="10-4">角色管理</el-menu-item>
            </el-submenu>
            <el-menu-item default-active="3" index="10"><i class="el-icon-star-on"></i>评价管理</el-menu-item>
            <el-submenu index="11">
              <template slot="title">
                <i class="el-icon-chat-round"></i>
                <span>信息管理</span>
              </template>
              <el-menu-item index="11-1">意见反馈</el-menu-item>
              <el-menu-item index="11-2">合作申请</el-menu-item>
              <el-menu-item index="11-3">用药问答</el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
    <div class="count">
      <div><router-view /></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.About {
  width: 100%;
  height: 100%;
  display: flex;
}

.count {
  display: flex;
}
</style>